<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>买入订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .order-tab .van-tabs__nav{
            padding: 0 0 !important;
        }
        .order-tab .van-tab{
            width: 20%;
            padding: 0px 0px!important;
        }
        .order-tab .van-ellipsis{
            font-size: 12px;
        }
        .order-tab .van-tabs--line .van-tabs__wrap{
            width: 100%;
        }

        .tap_active:after {
            content: '';
            position: absolute;
            left: 36%;
            top: auto;
            bottom: 0;
            right: auto;
            height: 3px;
            width: 23%;
            border-radius: 8px;
            background-color: #172E71;
        }
        .menu-top-tap {
            height: 44px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            width: 100%;
            display: flex;
        }
        .menu-top-tap .tap-item {
            /*float:left;*/
            text-align: center;
            margin: 0 auto;
            flex: 1;
            display: inline-block;
            height: 44px;
            line-height: 40px;
            position: relative;
            color: #333;
        }
        .menu-top-tap .tap_active {
            color: #333;
            font-weight: bold;
        }
    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">买入订单</span>
</div>
<div id="app" style="padding-top: 55px;"  v-cloak>
    <div class="purchase-order">
        <div class="sell-content-top">
            <div class="details">
                <div><img class="sell-top-img" v-src="'../../image/arrow.png'"/><span style="vertical-align: middle;display: inline-block;">预计获得 QHR</span></div>
                <div><img class="sell-top-img" v-src="'../../image/arrow-2.png'"/><span style="vertical-align: middle;display: inline-block;">预计支出 CNY</span></div>
            </div>
            <div class="details-bottom">
                <div>{{order_con.tradeNum}}</div>
                <div>{{order_con.totalPrice}}</div>
            </div>
        </div>
        <div class="pur-content">
            <div class="tran-content">
                <div class="seller-number-title" style="margin-bottom: 20px">
                    <p class="seller-letter">
                        {{hide_name_two(order_con.nickname)}}
                    </p>
                    <p class="seller-name">{{hide_name(order_con.nickname)}}</p>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">单价</div>
                    <div>{{order_con.tradePrice}} CNY</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">发布时间</div>
                    <div>{{order_con.createTime}}</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">订单号</div>
                    <div>{{order_con.orderNo}}</div>
                </div>
                <div class="purchase-floor">
                    <div class="purchase-floor-left" v-myclick='cancel_order'>取消订单</div>
                    <div class="purchase-floor-right" v-open-win vurl="../user/myassets">QHR资产</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        purchase_order,
        order_con,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var details={
          agtVer:1,
          clientVer:1,
          ctime:201911071802959,
          cctime:201911071802959,
          sign:"abcdefg",
          token:getPrefs('token'),
          orderNo:api.pageParam.orderid,
        }
        var base = new Base64();
        var	item=base.encode(JSON.stringify(details))
        var data = {
            jsonData:item,
        };
        var callback=function(ret){
          var base = new Base64();
          var purchase_order = base.decode(ret.content.jsonData);
            purchase_order =JSON.parse( purchase_order);
            // content_list=JSON.parse(data_list);
            order_con = purchase_order.coOrder;
            console.log(JSON.stringify(order_con));
            initApp();
        }
        pinet.post(APIURLP+'/play/od/getInfoData',data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
              purchase_order:purchase_order,
              order_con:order_con,
            },
            computed: {
            },
            methods: {
              hide_name_two:function(name){
                return new Array(name.length).join('') + name.substr(-1);
              },
              hide_name:function(name){
                return new Array(name.length).join('*') + name.substr(-1);
              },
              cancel_order:function(){
                var details={
                  agtVer:1,
                  clientVer:1,
                  ctime:201911071802959,
                  cctime:201911071802959,
                  sign:"abcdefg",
                  token:getPrefs('token'),
                  orderNo:api.pageParam.orderid,
                }
                var base = new Base64();
                var	item=base.encode(JSON.stringify(details))
                var data = {
                    jsonData:item,
                };
                var callback=function(ret){
                    api.toast({
                        msg: '取消成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    api.openWin({
                        name: 'QHRorder',
                        url: './QHRorder.html',
                    });
                }
                pinet.post(APIURLP+'/play/od/upCancelData',data, callback);
              },
            },
            watch: {

            },
        })
    }
    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            console.log('ddddd');
            api.closeWin();
        });
        api.addEventListener({
            name: 'reload'
        }, function () {
            window.location.reload();
        });
    }
</script>

</html>
